<template>
  <div class='root'>
    <el-table ref="dragTable" v-loading="listLoading" :data="data" row-key="id" border fit highlight-current-row style="width: 100%">
      <el-table-column v-for="(n1) in columns" :key="n1.id" :align="n1.align || 'align'" :label="n1.title || '无标题'" :width="!n1.children ? n1.width || 150 : ''">
        <template v-if="n1.children">
          <el-table-column v-for="(n2) in n1.children" :key="n2.id" :align="n2.align || 'align'" :label="n2.title || '无标题'" :width="!n2.children ? n2.width || 150 : ''">
            <template v-if="n2.children">
              <el-table-column v-for="(n3) in n2.children" :key="n3.id" :align="n3.align || 'align'" :label="n3.title || '无标题'" :width="!n3.children ? n3.width || 150 : ''">
                <template slot-scope="scope">
                  <span>{{ scope.row[n3.dataIndex] }}</span>
                </template>    
              </el-table-column>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row[n2.dataIndex] }}</span>
            </template>
          </el-table-column>
        </template>
        
        <template slot-scope="scope">
          <template v-if="n1.title == '操作' && n1.dataIndex && n1.dataIndex.length">
            <el-button @click="tableBubbling({type: 'details', column: n1, content: scope.row})" v-if="n1.dataIndex.indexOf('details') !== -1">查看详细</el-button>
            <el-button @click="tableBubbling({type: 'delete', column: n1, content: scope.row})" v-if="n1.dataIndex.indexOf('delete') !== -1" type="danger">删除</el-button>
          </template>
          <template>
            <span>{{ scope.row[n1.dataIndex] }}</span>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <div class='page' v-if="total > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[1,15,50,100,200,500,1000,5000,10000,50000]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'Table',
  props: {
    columns: {
      type: Array,
      defaule: []
    },
    url: {
      type: String,
      detault: ''
    },
    pparams: {
      type: Object,
      defaule: {}
    }
  },
  data() {
    return {
      listLoading: false,
      data: [],
      params: {
        pageNum: 1,
        pageSize: 15,
      },
      flatColumns: [],
      total: 0
    }
  },
  created() {
    window._this = this
    this.fetchList()
  },
  computed: {

  },
  methods: {
    async fetchList() {
      let newParams    = {...this.pparams, ...this.params}
      delete newParams.timer
      this.listLoading = true
      let { data }     = await request({ url: this.url, method: 'get', params: newParams })
      this.data        = data.list
      this.total       = data.total
      this.listLoading = false
    },
    tableBubbling(obj) {
      this.$emit('tableBubbling', obj)
    },
    handleSizeChange(i) {
      this.params.pageNum = 1
      this.params.pageSize = i
      this.fetchList()
    },
    handleCurrentChange(i) {
      this.params.pageNum = i
      this.fetchList()
    },
    DoingFlat(list) {
      list.forEach((n1, i1) => {
        if (n1.children && n1.children.length) {
          this.DoingFlat(n1.children)
        } else {
          this.flatColumns.push(n1.dataIndex)
        }
      })
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.page {
  padding-top: 20px
}
</style>
